<template>
  <div class="nav">
    <van-grid>
      <van-grid-item v-for="nav in navs.slice(0, 4)" :key="nav.id">
        <nuxt-link :to="nav.path">
          <van-icon :name="nav.icon" />
          {{ nav.title }}
        </nuxt-link>
      </van-grid-item>
    </van-grid>
    <van-grid>
      <van-grid-item v-for="nav in navs.slice(4)" :key="nav.id">
        <nuxt-link :to="nav.path">
          <van-icon :name="nav.icon" />
          {{ nav.title }}
        </nuxt-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navs: [
        {
          title: "正在热卖",
          icon: "fire",
          path: "/hot",
          id: 1
        },
        {
          title: "全部分类",
          icon: "goods-collect",
          path: "/all/goods",
          id: 2
        },
        {
          title: "全部商家",
          icon: "shop",
          path: "/all/shops",
          id: 3
        },
        {
          title: "我的订单",
          icon: "todo-list",
          path: "/order",
          id: 4
        },
        {
          title: "我的评论",
          icon: "comment",
          path: "/user/comment",
          id: 5
        },
        {
          title: "我的收藏",
          icon: "like",
          path: "/user/like",
          id: 6
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.nav {
  padding: 0.2rem;
  font-size: 0.24rem;
  ::v-deep .van-grid-item__content {
    padding: 0.32rem 0.16rem;
  }
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #121212;
  }
  i {
    font-size: 0.4rem;
    color: #ff976a;
  }
}
</style>
